<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main" id="main">222</div>
</body>
<style>
    .main {
        width: 100px;
        height: 100px;
        background-color: aqua;
        opacity: 0;
    }
</style>
<script>
    // 1.visibility：hidden不会改变页面布局，在文档布局中仍保留原来的空间会引起重绘
    // 2.display：none会改变页面布局，在文档布局中不再分配空间会引起回流+重绘
    // 3.opacity：0该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，
    // 如click 事件，那么点击该区域，也能触发点击事件的

    let main = document.getElementById('main')
    main.onclick = function () {
        alert('点击')
    }
</script>
</html>